<template>
  <div>
    <ul>
      <template v-for="item in data" :key="item">
        <li v-if="item % 2">{{ item }}</li>
      </template>

    </ul>
    <h1 ref="h1">{{ count }}--{{ name }}---{{ age }}</h1>
    <input ref="qq" type="text" v-model="name">
    <button @click="add">+</button>
    <button @click="minus">-</button>
    <teleport to="#qqq">
      <!-- 这个标签 可以指定他的内容放到index.html的哪个位置？ -->
      <img src="../assets/logo.png" alt="">
      <h1>{{ count }}--{{ name }}---{{ age }}</h1>
      {{ data }}
    </teleport>
    <teleport to="#qqq">
      <!-- 这个标签 可以指定他的内容放到index.html的哪个位置？ -->
      <h2>{{ count }}--{{ name }}---{{ age }}</h2>
    </teleport>
  </div>
</template>

<script>
import { isRef, markRaw, onMounted, reactive, ref, toRaw, toRef, toRefs, unref } from 'vue'
//  reactive, ref, toRefs
export default {
  props: ['data'],
  emits: ['qqq'],
  setup(props, ctx) { // props对应的是父组件传进来的数据(前提是上边有props接收)  ctx
    console.log(props.data, ctx)
    // props.data = 999
    // 这里边不涉及this
    let count = ref(100); // ref的作用就是把一个值类型做成响应式数据
    // 通过ref 产生的响应式数据 在模板中直接使用 JS中需要加上.value
    let state = reactive({ // 把一个对象做成一个响应式数据
      name: "珠峰",
      age: 13,
      ary: [1, 2, 3, 4, 5],
      sex: 0
    })
    // console.log(state, toRaw(state))
    // console.log(toRefs(state))
    // let sex = state.sex;// 不是一个响应式的数据
    let sex = toRef(state, 'sex')
    // console.log(isRef(sex))
    // console.log(unref(sex))
    const add = () => {
      console.log('add')
      // count.value++
      state.age++
      ctx.emit('qqq', [111, 222]) // 类似于vue2的this.$emit('qqq',[111,222])
    }
    const minus = () => {
      console.log('minus')
      count.value--
      console.log(count)
    }


    let obj = { q: 1, w: 2 }
    let ooo = markRaw(obj)
    // console.log(reactive(obj))


    let h1 = ref(null)
    // vue3 setup通过ｒｅｆ获取DOM元素或者组件使用ｒｅｆ声明一个响应式数据
    // 然后返出去　然后模板中直接写ｒｅｄ＝‘变量’
    onMounted(() => {
      console.log(h1.value)
    })
    onMounted(() => {
      console.log(h1.value)
    })
    onMounted(() => {
      console.log(h1.value)
    })
    onMounted(() => {
      console.log(h1.value)
    })
    return {
      //这个对象中的属性可以直接再 模板中使用
      count,
      add,
      minus,
      ...toRefs(state),
      h1
    }
  },

}
</script>

<style lang="scss" scoped>
</style>